<template>
	<div class="mb20">
    <el-card shadow="never">
      <el-row :gutter="20">
        <el-col :span="5" class="ml20">
          <el-card style="max-width: 480px">
            <h6 class="title_2 flex_c_c">本月入账保费</h6>
            <div class="flex_c_c">20,000</div>
          </el-card>
        </el-col>
        <el-col :span="5" class="ml20">
          <el-card style="max-width: 480px">
            <h6 class="title_2 flex_c_c">上月入账保费</h6>
            <div class="flex_c_c">20,000</div>
          </el-card>
        </el-col>
        <el-col :span="5" class="ml20">
          <el-card style="max-width: 480px">
            <h6 class="title_2 flex_c_c">去年本月入账保费</h6>
            <div class="flex_c_c">20,000</div>
          </el-card>
        </el-col>
      </el-row>
      <div class="mt20">
        <div id="monthlyPremium" style="width: 100%; height:400px;"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup name="monthlyPremium">
  import * as echarts from 'echarts';
  import { onMounted, reactive, ref, toRefs } from 'vue';

  nextTick(() => {
    let chartDom = document.getElementById('monthlyPremium');
    let myChart = echarts.init(chartDom);
    let option;

    const colors = ['#5470C6', '#91CC75', '#EE6666'];
    option = {
      title: {
        text: '月新增'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['202301', '202301', '202301', '202301', '202301', '202301','202301', '202301', '202301', '202301', '202301', '202301']
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      series: [
        {
          name: '本月新增',
          type: 'bar',
          data: [539, 535, 142, 275, 72, 210, 468, 355, 192, 315, 522, 479]
        },
        {
          name: '去年本月新增',
          type: 'bar',
          data: [200, 190, 328, 266, 484, 185, 11, 54, 67, 112, 261, 579]
        }
      ]
    };

    option && myChart.setOption(option);
  })
</script>

<style lang="scss" scoped>

</style>